// components/tagTab/tagTab.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 样式: 可滚动, 不可滚动(平分)
    isCanScroll: {
      type: Boolean,
      value: true,
    },
    lineWidth: {
      type: String,
      value: "38rpx",
    },
    lineHeight: {
      type: String,
      value: "6rpx",
    },
    // 自定义下划线
    customLine: {
      type: Boolean,
      value: false,
    },
    // 背景颜色 (#999 或 red)
    backgroundColor: {
      type: String,
      value: "white",
    },

    selectFontColor: {
      type: String,
      value: "var(--themeColor, #415EF8)"
    },
    lineColor: {
      type: String,
      value: "var(--themeColor, #415EF8)"
    },
    customCellStyle: {
      type: String,
      value: ""
    },
    // 模式1.标签数组
    tags: {
      type: Array,
      value: [],
      observer: function () {
        setTimeout(() => {
          this.createSelectorQuery(this).selectAll("#scrollView").boundingClientRect().exec(res => {
            // 获取scrollView节点
            let scrollViewNode = res.length && res[0].length && res[0][0]
            this.scrollWidth = scrollViewNode.width
          })

          // 初始化标签项
          this.initCellView()

        }, 30)
      }
    },
    // 模式2.标签对象数组, 对象对应tagsObjKey变量
    tagsObj: {
      type: Array,
      value: [],
      observer: function (value) {
        this.setData({
          tags: value.map(item => {
            return item[this.data.tagsObjKey]
          })
        })
      }
    },
    // tagsObj数组中,对象对应key
    tagsObjKey: {
      type: String,
      value: "title"
    },
    // 角标
    selectedIndex: {
      type: Number,
      value: 0,
      observer: function (value) {
        this.selectedItem(value)
      }
    },
    titleColor: {
      type: String,
      value: "#333B4D"
    },
    fontSize: {
      type: String,
      value: "28rpx",
    },
    padding: {
      type: String,
      value: ""
    },
    color: {
      type: String,
      value: "#fff"
    },
    activeColor: {
      type: String,
      value: "var(--themeColor)"
    },
    // 特殊处理, 组件不触发选择,只传递事件
    disableSelect: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    isInitFinish: false,
    // 记录所有滚动的中心位置
    tagsCenter: [],
    // 滚动条位置
    lineLeft: 0,
    // 外部布局边距(自动计算)
    marginLeft: 0,
    // 滚动条节点宽度(自动计算)
    lineNodeWidth: 0,
    // 是否完成初始化
    isFinishInit: false,
  },
  lifetimes: {
    ready: function () {

    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 选择第几个
    selectedItem(index) {
      let {
        tagsCenter,
        marginLeft,
        lineNodeWidth
      } = this.data
      let scrollX = tagsCenter[index] - this.scrollWidth / 2
      this.setData({
        selectedIndex: index,
        lineLeft: tagsCenter[index] - (lineNodeWidth / 2) - marginLeft,
        scrollX: scrollX > 0 ? scrollX : 0
      },()=>{
        console.log("渲染完成")
      })
    },

    // 点击 项
    clickTag(e) {
      let index = e.currentTarget.dataset.index
      console.log('点击项', index)
      const {
        tags,
        tagsObj
      } = this.data
      this.triggerEvent("change", {
        index,
        target: (tagsObj && tagsObj.length) ? tagsObj[index] : tags[index]
      })

      if (!this.data.disableSelect) {
        this.selectedItem(index)
      }
    },
    // 初始化下划线
    initLineView() {
      this.createSelectorQuery(this).selectAll("#lineView").boundingClientRect().exec(res => {
        // 获取scrollView节点
        let lineViewNode = res.length && res[0].length && res[0][0]
        if (lineViewNode) {
          // 记录lineNode的实际宽度
          this.setData({
            lineNodeWidth: lineViewNode.width
          })
          this.selectedItem(this.data.selectedIndex)
        }
        
        // 完成初始化
        setTimeout(()=>{
          this.setData({
            isFinishInit: true
          })
        },100)
      })
    },

    // 初始化标签项
    initCellView() {
      this.createSelectorQuery(this).selectAll(".cell").boundingClientRect().exec(res => {
        // 获取所有cell节点
        let nodes = res.length && res[0].length && res[0]
        if (!nodes) return
        // 计算每个节点中心值
        let tagsCenter = nodes.map(i => i.left + i.width / 2)
        // 设置滚动条开始值
        this.setData({
          marginLeft: nodes[0].left,
          tagsCenter,
        })
        if (!tagsCenter.length) {
          throw "获取标签中心点位置失败"
        }
        // tagsCenter.length && this.selectedItem(this.data.selectedIndex)

        // 初始化下划线数据
        this.initLineView()
        // 完成初始化回调
        this.triggerEvent("finish")
      })
    }
  }
})